<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenModal, VbenButton } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { addAccontTableApi, getAccontTableApi } from '#/api/business/account';

import ExtraModal from './modal.vue';

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名字',
      },
      fieldName: 'name',
      label: '名字',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入交易号',
      },
      fieldName: 'transactionNum',
      label: '交易号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入订单号',
      },
      fieldName: 'orderNum',
      label: '订单号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入交易时间',
      },
      fieldName: 'tradingTime',
      label: '交易时间',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入交易对方',
      },
      fieldName: 'counterparties',
      label: '交易对方',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入商品名称',
      },
      fieldName: 'productName',
      label: '商品名称',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: 'Color1',
            value: '1',
          },
          {
            label: 'Color2',
            value: '2',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'type',
      label: '收支类型',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '方式1',
            value: '1',
          },
          {
            label: '方式2',
            value: '2',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'payMethod',
      label: '支付方式',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入金额',
      },
      fieldName: 'price',
      label: '金额',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请选择资金状态',
      },
      fieldName: 'status',
      label: '资金状态',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入备注',
      },
      fieldName: 'remark',
      label: '备注',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    // { align: 'left', title: 'Name', type: 'checkbox', width: 100 },
    // { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
    { field: 'name', title: '名字' },
    { field: 'transactionNum', title: '交易号' },
    { field: 'orderNum', title: '订单号' },
    { field: 'tradingTime', title: '交易时间' },
    { field: 'counterparties', title: '交易对方' },
    { field: 'productName', title: '商品名称' },
    { field: 'type', title: '收支类型' },
    { field: 'payMethod', title: '支付方式' },
    { field: 'price', title: '金额' },
    { field: 'status', title: '资金状态' },
    { field: 'remark', title: '备注' },
    {
      cellRender: { name: 'CellLink', props: { text: '编辑' } },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        // message.success(`: ${JSON.stringify(formValues)}`);
        const res = await getAccontTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          query: formValues,
        });
        return {
          total: res.totalRowCount,
          items: res.rows,
        };
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
const [Modal, modalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: ExtraModal,
});

// 新增表单明细
const handleSubmit = async (data: any) => {
  await addAccontTableApi(data);
  gridApi.reload();
};

function openModal() {
  modalApi
    .setData({
      // content: '外部传递的数据 content',
      // payload: '外部传递的数据 payload',
    })
    .open();
}

function handleEdit() {
  // console.log('🚀 ~ handleEdit ~ handleEdit:', handleEdit);
}
</script>

<template>
  <div class="vp-raw w-full">
    <Grid>
      <template #toolbar-tools>
        <Modal @submit="handleSubmit" />
        <VbenButton @click="openModal">记账单</VbenButton>
      </template>
      <template #action>
        <VbenButton type="link" @click="handleEdit">111</VbenButton>
      </template>
    </Grid>
  </div>
</template>
